<template>
  <page-frame>
    <div class="staff-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">团队详情</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>

      <div class="staff-information-main">
        <!--团队基本信息-->
        <div class="panel">
          <div class="panel-title first">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-form label-position="right" label-width="85px">
              <el-row>
                <el-col :span="10">
                <el-form-item label="团队名称">
                  <el-input
                    v-model="teamQueryResponseDTO.tmName"
                    placeholder="请输入团队名称"
                    :disabled = "true"
                    class="teamDetailInput">
                  </el-input>
                </el-form-item>
              </el-col>
                <el-col :span="10" :offset="2">
                  <el-form-item label="服务类型">
                    <el-select placeholder="服务类型" multiple disabled v-model="teamQueryResponseDTO.type">
                      <el-option
                        v-for="item in serviceTypes"
                        :label="item.typeName"
                        :value="item.typeId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="负责人">
                    <el-input
                      v-model="teamQueryResponseDTO.dutyPerson"
                      placeholder="请输入负责人名称"
                      :disabled = "true"
                      class="teamDetailInput">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2">
                  <el-form-item label="组员" class="tmMember">
                    <span>当前共计：</span><span v-model="currentTmNumber">{{currentTmNumber}}</span>人
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="工作描述">
                    <el-input type="textarea" :disabled = "true" v-model="teamQueryResponseDTO.teamDesc"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <!--团队成员-->
        <div class="panel" style="margin-top: -22px;">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">团队成员</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-table
                  :data="empList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="emName"
                    label="员工姓名"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="emNo"
                    label="员工编号"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="phone"
                    label="联系方式"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="floorBed"
                    label="负责床位">
                  </el-table-column>
                </el-table>
            </el-row>
          </div>
        </div>
        <!--负责床位-->
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">负责床位</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-form label-position="right" label-width="85px">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="负责床位" class="tmMember">
                  <span>当前共计：</span><span v-model="teamQueryResponseDTO.bedNumber">{{teamQueryResponseDTO.bedNumber}}</span>床
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2">
                  <el-form-item label="负责房间" class="tmMember">
                    <span>当前共计：</span><span v-model="teamQueryResponseDTO.roomNumber">{{teamQueryResponseDTO.roomNumber}}</span>房
                  </el-form-item>

                </el-col>
              </el-row>
            </el-form>
            <el-row>
              <el-table
                  :data="bedList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="blName"
                    label="建筑"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="flName"
                    label="楼层"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="rmName"
                    label="房间"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="bedNo"
                    label="床位号"
                    width="">
                  </el-table-column>
                  <!--<el-table-column-->
                    <!--prop="memberNo"-->
                    <!--label="会员编号"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <el-table-column
                    prop="memberName"
                    label="会员">
                  </el-table-column>
                  <el-table-column
                    prop="lName"
                    label="照护等级">
                  </el-table-column>
                  <el-table-column
                    prop="dutyPersonNames"
                    label="负责员工">
                  </el-table-column>
                </el-table>
            </el-row>
          </div>
        </div>
      </div>

      <!--<div class="">-->
        <!--<div class="order-content">-->
          <!--<div class="container">-->
            <!--<el-row :gutter="20" >-->
              <!--<el-col :span="6">-->
                <!--<div class="input-item">-->
                  <!--<label>团队名称</label>-->
                  <!--<el-input-->
                    <!--v-model="teamQueryResponseDTO.tmName"-->
                    <!--placeholder="请输入团队名称"-->
                    <!--:disabled = "true"-->
                    <!--class="teamDetailInput">-->
                  <!--</el-input>-->
                <!--</div>-->
              <!--</el-col>-->
              <!--<el-col :span="6">-->
                <!--<div class="input-item">-->
                  <!--<label>负责人</label>-->
                  <!--<el-input-->
                    <!--v-model="teamQueryResponseDTO.dutyPerson"-->
                    <!--placeholder="请输入负责人名称"-->
                    <!--:disabled = "true"-->
                    <!--class="teamDetailInput">-->
                  <!--</el-input>-->
                <!--</div>-->
              <!--</el-col>-->
              <!--<el-col :span="6">-->
                <!--<div class="input-item">-->
                  <!--<label>服务类型</label>-->
                  <!--<el-select placeholder="服务类型" multiple disabled v-model="teamQueryResponseDTO.type">-->
                    <!--<el-option-->
                      <!--v-for="item in serviceTypes"-->
                      <!--:label="item.typeName"-->
                      <!--:value="item.typeId">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</div>-->
              <!--</el-col>-->
            <!--</el-row>-->
            <!--&lt;!&ndash;成员管理&ndash;&gt;-->
            <!--<el-row>-->
              <!--<div>-->
                <!--<el-row :gutter="20" class="teamDetailTitle" style="margin-top:20px;">-->
                  <!--<label >成员管理</label>-->
                <!--</el-row>-->
                <!--<el-table-->
                  <!--:data="empList"-->
                  <!--border-->
                  <!--max-height="361"-->
                  <!--style="width: 100%">-->
                  <!--<el-table-column-->
                    <!--prop="emName"-->
                    <!--label="员工姓名"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="phone"-->
                    <!--label="手机号"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="role"-->
                    <!--label="角色">-->
                  <!--</el-table-column>-->
                <!--</el-table>-->
              <!--</div>-->
            <!--</el-row>-->
            <!--&lt;!&ndash;床位管理&ndash;&gt;-->
            <!--<el-row>-->
              <!--<div>-->
                <!--<el-row :gutter="20" class="teamDetailTitle">-->
                  <!--<label >床位管理</label>-->
                <!--</el-row>-->
                <!--<el-table-->
                  <!--:data="bedList"-->
                  <!--border-->
                  <!--max-height="361"-->
                  <!--style="width: 100%">-->
                  <!--<el-table-column-->
                    <!--prop="BlFlName"-->
                    <!--label="楼宇/楼层"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="bedNo"-->
                    <!--label="床位"-->
                    <!--width="">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="memberName"-->
                    <!--label="入住会员">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="lName"-->
                    <!--label="护理等级">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column-->
                    <!--prop="dutyPersonNames"-->
                    <!--label="床位负责人">-->
                  <!--</el-table-column>-->
                <!--</el-table>-->
              <!--</div>-->
            <!--</el-row>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    </div>
  </page-frame>
</template>


<script>
  import teamApi from "../../service/corporation/teamApi";
  export default {
    methods: {
      init(){
        this.currentTmNumber = this.$route.params.teamNumber;
        this.currentTeamId = this.$route.params.teamId;
        this.loadDataTable();
        this.getAllTeamServiceType();
      },
      loadDataTable(){
        this.getTeamByTeam();
      },
      //返回
      back(){
        this.$router.push({name: 'team',params: { no: 5 }});
      },
      //获取团队所有信息
      getTeamByTeam(){
        let self = this;
        teamApi.getTeamByTeamId(self.currentTeamId).then(function(response){
          self.empList   =response.body.data.empList;
          self.bedList   =response.body.data.bedList;
          for(let i=0;i<response.data.data.bedList.length;i++){
            self.bedList[i].BlFlName = response.data.data.bedList[i].blName+response.data.data.bedList[i].flName;
          }
          for(var bed of self.bedList){
            bed.dutyPersonNames =  bed.dutyPersonName.join(" , ");
          }
          self.teamQueryResponseDTO   =response.body.data.teamQueryResponseDTO;
          self.isLeader();
        },function (){})
      },
      /**
       * 获取所有团队服务类型
       **/
      getAllTeamServiceType() {
        let self = this;
        teamApi.getAllTeamServiceType().then(function(response){
          self.serviceTypes = response.data.data;
        })
      },
      //是否是组长
      isLeader(){
        let self = this;
        self.currentDutyPersonEmId = self.teamQueryResponseDTO.dutyPersonEmId;
        for(var i=0;i<self.empList.length;i++){
          (function (j) {
            if(self.empList[j].emId == self.currentDutyPersonEmId){
              self.empList[j].role ="负责人"
            }else {
              self.empList[j].role ="组员"
            };
          })(i);
        };
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        currentTmNumber:null,
        currentTeamId:0,
        currentDutyPersonEmId:0,
        empList: [],
        bedList: [],
        serviceTypes:[],
        teamQueryResponseDTO: {
          "bedNumber": 0,
          "dutyPerson": "",
          "dutyPersonEmId": 0,
          "memberNumber": 0,
          "teamDesc": "",
          "tmId": 0,
          "tmMemberNumber": 0,
          "tmName": ""
        },
      }
    }
  }
</script>
<style>
  .staff-main .btns{
    float: right;
  }
  .container .input-item{
    margin-top: 15px;
  }
  .staff-main .tmMember{
    color:#48576a;
  }
  .teamDetailTitle{
    padding-left:10px;
    padding-right:10px;
    margin-top:40px;
    height:50px;
    line-height:50px;
  }
  @media screen and (max-width:1367px){
    .teamDetailInput{
      width:70%!important;
    }
  }
</style>
